import React, { useEffect, useState, useCallback } from "react";
import "./App.css";
import axios from "axios";
import { Pagination } from 'antd';

import { Flex, Layout } from 'antd';


import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import { Menu } from 'antd';
import { Outlet, useNavigate } from "react-router-dom";


export default function App() {
  const { Header, Footer, Sider, Content } = Layout;

  const contentStyle = {
    color: '#fff',
    backgroundColor: '#0958d9',
  };
  const siderStyle = {
    textAlign: 'center',
   width:'20%',
    color: '#fff',
    backgroundColor: '#1677ff',
    
  };
  const layoutStyle = {
    borderRadius: 8,
    overflow: 'hidden',
    width: '100%',
    height:'500px'
   
  };
  const items = [
    {
      key: 'sub1',
      label: 'Navigation One',
      icon: <MailOutlined />,
      children: [
        {
          key: 'g1',
      
          type: 'group',
          children: [
            { key: '/app/L1', label: 'L1' },
            { key: '/app/L2', label: 'L2' },
          ],
        },
        
      ],
    },
    {
      key: 'sub2',
      label: 'Navigation Two',
      icon: <AppstoreOutlined />,
      children: [
        { key: '5', label: 'Option 5' },
        { key: '6', label: 'Option 6' },
        {
          key: 'sub3',
          label: 'Submenu',
          children: [
            { key: '7', label: 'Option 7' },
            { key: '8', label: 'Option 8' },
          ],
        },
      ],
    },
  
  
    
  ];

  const navigator=useNavigate()

  const onClick = e => {
    navigator(e.key)
  };

  return (
    <div>

       <div>
       <Layout style={layoutStyle}>
      <Sider width="25%" style={siderStyle}>
        
      <Menu
            onClick={onClick}
            style={{ width: '' }}
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            mode="inline"
            items={items}
            
          />
      123
      </Sider>
      <Layout>
     
        <Content style={contentStyle}>
          <Outlet></Outlet>
        </Content>
       
      </Layout>
    </Layout>
       </div>
     
      
    </div>
  );
}
